<template>
  <div class="bottom">
    <div class="left">阅读  {{watchTotal}}</div>
    <div :class="{right: true,active: isActive}" @click="isZan">
      <!-- <img src="../assets/da.png" alt="点赞"> -->
      <span>&#xe60c;</span>
      <p>赞</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  data () {
    return {
      watchTotal: 85,
      isActive: false
    }
  },
  methods: {
    isZan: function () {
      this.isActive = !this.isActive
    }
  }
}
</script>

<style lang='scss' scoped>
@font-face {
  font-family: 'iconfont';  /* project id 993940 */
  src: url('//at.alicdn.com/t/font_993940_1fcywdj9s56.eot');
  src: url('//at.alicdn.com/t/font_993940_1fcywdj9s56.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_993940_1fcywdj9s56.woff') format('woff'),
  url('//at.alicdn.com/t/font_993940_1fcywdj9s56.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_993940_1fcywdj9s56.svg#iconfont') format('svg');
}
.bottom{
    height: 17.33vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      font-family: SourceHanSansCN-Regular;
      font-size: 3.46vw;
      font-weight: 400;
      color: rgba(190,190,190,1);
      line-height: 5.2vw;
    }
    .right{
      font-size: 3.46vw;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      // color: rgba(60,86,151,1);
      color: #bebebe;
      line-height: 5.2vw;
      display: flex;
      &.active{
        color: #3C5697;
      }
      span{
        font-family: 'iconfont';
        font-size: 5vw;
        // margin-top: 0.5vw;
      }
    }
  }
</style>
